<template>
  <view>
    <div class="tabarCont">
      <div class="tabarItem" @click="jump(1, '/pages/index/search')">
        <img v-if="active !== 1" src="@/assets/sy.png" alt="" />
        <img v-else src="@/assets/sys.png" alt="" />
        <span>首页</span>
      </div>
      <div class="tabarItem" @click="jump(2, '/pages/buy/index')">
        <img v-if="active !== 2" src="@/assets/qg.png" alt="" />
        <img v-else src="@/assets/qgs.png" alt="" />
        <span>求购大厅</span>
      </div>
      <div
        class="tabarItem"
        @click="jump(3, '/pages/appraisalOEM/index')"
        style="margin-left: 58rpx"
      >
        <img v-if="active !== 3" src="@/assets/jd.png" alt="" />
        <img v-else src="@/assets/jdx.png" alt="" />
        <span>鉴定代工</span>
      </div>
      <div class="tabarItem" @click="jump(4, '/pages/person/index')">
        <img v-if="active !== 4" src="@/assets/wd.png" alt="" />
        <img v-else src="@/assets/wdx.png" alt="" />
        <span>我的</span>
      </div>
      <div class="add" @click="$refs.release.show = true">
        <img src="@/assets/add.png" alt="" />
        <!-- 发布 -->
      </div>
    </div>
    <release ref="release" />
  </view>
</template>
<script>
import release from "@/pages/release/index.vue";
export default {
  props: {
    active: {
      type: Number,
      default: 30,
    },
  },
  components: { release },
  data() {
    return {
      list: [],
      path: 1,
    };
  },
  mounted() {
    // console.log(uni.getStorageSync("active"));
    // if (uni.getStorageSync("active")) {
    //   this.active = uni.getStorageSync("active");
    // } else {
    //   this.active = 1;
    // }
  },
  methods: {
    jump(data, path) {
      // this.active = data;
      // console.log(this.path);
      this.path = data;
      if (this.path == 1) {
        this.$.open_tab("/pages/index/index");
        // uni.navigateTo({ url: "/pages/index/index" });
      }
      if (this.path == 2) {
        // uni.navigateTo({ url: "/pages/buy/index" });
        this.$.open_tab("/pages/buy/index");
      }
      if (this.path == 3) {
        // uni.navigateTo({ url: "/pages/appraisalOEM/index" });
        this.$.open_tab("/pages/appraisalOEM/index");
      }
      if (this.path == 4) {
        // uni.navigateTo({ url: "/pages/person/index" });
        this.$.open_tab("/pages/person/index");
      }
      // uni.navigateTo({ url: "/pages/index/search" });
      // uni.navigateTo({ url: path }); //"/pages/message/index"
    },
  },
};
</script>
<style scoped lang="scss">
.tabarCont {
  position: fixed;
  bottom: 0;
  height: 120rpx;
  width: 100%;
  padding: 0 52rpx;
  padding-top: 24rpx;
  background: url("@/assets/bg.png");
  display: flex;
  //   align-items: center;
  justify-content: space-between;
  z-index: 99999;
  padding-right: 70rpx;
  .tabarItem {
    text-align: center;
    font-size: 20rpx;
    img {
      width: 40rpx;
      height: 36rpx;
      margin: 0 auto;
      margin-bottom: 4rpx;
    }
  }
}
.add {
  width: 92rpx;
  height: 92rpx;
  position: absolute;
  left: 51%;
  top: -30rpx;
  transform: translate(-50%, 0%);
  text-align: center;
  font-size: 20rpx;
  z-index: 9999;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
